<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/*外边距问题1   所有元素具备边框意外距离，四个 上下   左右【微小的偏移】
		      外边距属性：行内元素 a、i、delete、...只能支持左右边距 
			             布局，至此左右推动效果
						 解决方案：行转块
						 
			常用margin属性：两个属性值， margin：auto；居中
						 */
		span{
			border: 1px solid red;
			/* margin外边距属性 ：1个属性值: 上 右 下 左*/
			margin: 300px;/*？上下  左右  上下效果没有*/
			/* margin外边距属性 ：2个属性值：上下 左右 */
			margin: 100px 200px;
			/* margin外边距属性 ：2个属性值：上 右左 下 */
			margin: 100px 200px 300px;
			/* margin外边距属性 ：4个属性值: 上 右 下 左*/
			margin: 100px 200px 300px 400px;
		}
		h1{
			width: 50%;
			border: 1px solid red;
			margin: 300px;/*？上下  左右  上下效果没有*/
			/* margin外边距属性 ：2个属性值：上下 左右 */
			margin: 100px 200px;
			/* margin外边距属性 ：2个属性值：上 右左 下 */
			margin: 100px 200px 300px;
			/* margin外边距属性 ：4个属性值: 上 右 下 左*/
			margin: 100px 200px 300px 400px;
			margin: auto;
		}
		/* 外边距问题2：外边距合并问题 :
		上下元素都存在外边距,垂直边距为主,怎么解决?
		外边距垂直合并:最大外边距为主,怎么解决?
		推荐:1.margin设置一个值,上下会垂直,去掉一个上 下元素其中上 下外边距,重新计算
		    2.padding代替margin
				*/
		.parent{
			
			width: 200px;
			height: 200px;
			background: #00ffff;
			/* 下外边距 */
			margin-top: 30px;
			/* 父元素: border:1px solid transparent */
			/* border: 1px solid transparent; */
			/* 父类元素:overflow: hidden;创建新块级上下文,阻止外边距合并 */
			overflow: hidden;
		}
		.child{
			
			width: 100px;
			height: 100px;
			background: #ffaa00;
			margin-top: 30px;
			
			
		}
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		
		<div class="parent">
			<div class="child"></div>
		</div>
		
		
		
		
		
		<ul>
			<li>
				
			</li>
		</ul>
		<input type="text">
		<table>
			<tr>
				<td></td>
			</tr>
		</table>
		<p>外边距</p>
		<hr>
		<!-- 元素：存在于框模型=外边距+边框+内边距+内容
		 有些元素默认外边距，处理方案：通配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
	</body>
</html>
<!-- 默认存在外边距的元素
     ul li             √
	 form input        ×
	 table tr td       ×
	 p                 √
 -->